<template>
  <a-form layout="inline">
    <a-form-item label="">
      <a-range-picker v-model:value="dateRange" @change="onRangeChange" value-format="YYYY-MM-DD" />
    </a-form-item>

    <a-form-item label="">
      <a-button type="primary" @click="lastDays(7)">最近一周</a-button>
      <a-button type="primary" class="ml-2" @click="lastDays(10)">最近十天</a-button>
      <a-button type="primary" class="ml-2" @click="lastDays(15)">最近15天</a-button>
      <a-button type="primary" class="ml-2" @click="lastDays(30)">最近一个月</a-button>
    </a-form-item>
  </a-form>
</template>
      
      <script>
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
export default defineComponent({
  setup() {
    const dateFormat = 'YYYY-MM-DD';
    const dateRange = ref([]);

    const selected = ref('a');
    const selected2 = ref('a');
    const selected3 = ref('a');

    const router = useRouter();

    function onSubmit() {
      if (selected2.value === 'a') {
        router.push({
          path: '/data/analyze-1',
        });
      }
      if (selected2.value === 'b') {
        router.push({
          path: '/data/analyze-2',
        });
      }
    }

    function onRangeChange() {
      console.log(dateRange.value);
    }

    function lastDays(num) {
      const start = dayjs().format(dateFormat);
      const end = dayjs().subtract(num, 'days').format(dateFormat);
      dateRange.value = [start, end];
    }

    return {
      selected,
      selected2,
      selected3,
      onSubmit,
      dateRange,
      onRangeChange,
      lastDays,
    };
  },
});
</script>
      
      <style>
</style>